<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
	</head>
	<body>
<div id="M1" style="width:80px; height:25px; background:#CCC; text-align:center; line-height:25px; position:relative;float: left;">
    <a href="#">菜单1</a>
    <ul id="m1" style="padding:0; margin:0; display:none; background:#DDD;list-style: none;">
        <li><a href="#">下拉1</a></li>
        <li><a href="#">下拉2</a></li>
        <li><a href="#">下拉3</a></li>
        <li><a href="#">下拉4</a></li>
    </ul>
    
</div>

<div id="M2" style="width:80px; height:25px; background:#CCC; text-align:center; line-height:25px; position:relative;float: left;">
    <a href="#">菜单2</a>
    <ul id="m2" style="padding:0; margin:0; display:none; background:#DDD;list-style: none;">
        <li><a href="#">下拉1</a></li>
        <li><a href="#">下拉2</a></li>
        <li><a href="#">下拉3</a></li>
        <li><a href="#">下拉4</a></li>
    </ul>
    
</div>
<div id="M3" style="width:80px; height:25px; background:#CCC; text-align:center; line-height:25px; position:relative;float: left;">
    <a href="#">菜单3</a>
    <ul id="m3" style="padding:0; margin:0; display:none; background:#DDD;list-style: none;">
        <li><a href="#">下拉1</a></li>
        <li><a href="#">下拉2</a></li>
        <li><a href="#">下拉3</a></li>
        <li><a href="#">下拉4</a></li>
    </ul>
    
</div>
<script>
$(function(){
		var M1 = $('#M1');
    var M2 = $('#M2');
    var M3 = $('#M3');
    M1.on('click',function(e){e.stopPropagation();})
    .find('>a').on('click',function(){
     M1.find('#m1').toggle();
     
    });
    M2.on('click',function(e){e.stopPropagation();})
    .find('>a').on('click',function(){
     M2.find('#m2').toggle();
     
    });
    M3.on('click',function(e){e.stopPropagation();})
    .find('>a').on('click',function(){
     M3.find('#m3').toggle();
     
    });
    $(document).on('click',function(){M1.find('#m1').hide(),M2.find('#m2').hide(),M3.find('#m3').hide();})
})
</script>
</body>
</html>